<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客后台管理系统</title>
    <!-- 引入 layui.css -->
    <link href="./2.12.1/css/layui.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .main-header {
            background-color: #23262E;
            color: #fff;
            height: 60px;
            line-height: 60px;
            padding: 0 20px;
        }
        .main-header .logo {
            font-size: 20px;
            font-weight: bold;
        }
        .main-sidebar {
            position: fixed;
            top: 60px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #393D49;
            overflow-y: auto;
        }
        .main-content {
            margin-left: 200px;
            padding: 15px;
            min-height: calc(100vh - 60px);
        }
        .main-content iframe {
            width: 100%;
            height: calc(100vh - 90px);
            border: none;
        }
        .user-info {
            float: right;
        }
        .sidebar-nav {
            padding: 10px 0;
        }
        .sidebar-nav a {
            display: block;
            padding: 10px 20px;
            color: #fff;
            text-decoration: none;
        }
        .sidebar-nav a:hover {
            background-color: #4E5465;
        }
        .sidebar-nav a.active {
            background-color: #009688;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="main-header">
        <span class="logo">博客后台管理系统</span>
        <div class="user-info">
            <span id="current-user"></span>
            <a href="javascript:void(0)" id="logout-btn" style="color: #fff; margin-left: 15px;">退出</a>
        </div>
    </div>
    
    <!-- 侧边栏导航 -->
    <div class="main-sidebar">
        <div class="sidebar-nav">
            <a href="javascript:void(0)" data-url="article.html" class="active">文章管理</a>
            <a href="javascript:void(0)" data-url="tag.html">标签管理</a>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content">
        <iframe id="content-frame" src="article.html"></iframe>
    </div>

    <!-- 引入 layui.js -->
    <script src="./2.12.1/layui.js"></script>
    <script>
        // 初始化
        layui.use(['layer'], function(){
            var layer = layui.layer;
            
            // 检查是否已登录
            if (localStorage.getItem('isLoggedIn') !== 'true') {
                window.location.href = 'login.html';
            }
            
            // 显示当前用户
            document.getElementById('current-user').textContent = localStorage.getItem('username');
            
            // 退出登录
            document.getElementById('logout-btn').addEventListener('click', function(){
                localStorage.removeItem('isLoggedIn');
                localStorage.removeItem('username');
                window.location.href = 'login.html';
            });
            
            // 侧边栏导航点击事件
            var navLinks = document.querySelectorAll('.sidebar-nav a');
            navLinks.forEach(function(link) {
                link.addEventListener('click', function() {
                    // 移除所有active类
                    navLinks.forEach(function(item) {
                        item.classList.remove('active');
                    });
                    // 添加active类到当前点击的链接
                    this.classList.add('active');
                    // 切换iframe内容
                    document.getElementById('content-frame').src = this.getAttribute('data-url');
                });
            });
        });
    </script>
</body>
</html>